<template>
  <div>
    <a-card :bordered="false">
      <f-search-form  @searchHandler="searchHandler" >
        <f-search-form-item label="标题" name="couponTitle"/>
        <f-search-form-item label="最小面额" name="couponAmountMin" style="width:230px" slot="advanced"/>
        <f-search-form-item label="最大面额" name="couponAmountMax" style="width:230px" slot="advanced"/>
        <f-search-form-item label="有效期" name="expiryTime" type="range" slot="advanced" :range-config="rangeConfig"/>
      </f-search-form>
      <f-table ref="table" size="default" rowKey="couponId" :scroll="scroll" :columns="columns" :multiple="false" :operator="operator" :params="queryParam" :api="api.coupon" handler="backstageCouponListHandler">
        <span slot="couponType" slot-scope="text, record, index">
          <span v-if="record.couponType==1">折扣</span>
          <span v-if="record.couponType==2">满减</span>
        </span>
        <span slot="withAmount" slot-scope="text, record, index">
          <span v-if="record.withAmount==-1">不限制</span>
          <span v-if="record.withAmount>0">满{{record.withAmount}}元可用</span>
        </span>
        <span slot="expiryTime" slot-scope="text, record, index">
          {{record.expiryBeginTime}}至{{record.expiryEndTime}}
        </span>
        <span slot="state" slot-scope="text, record, index">
          <a-switch v-model="record.state==1" checkedChildren="已启用" unCheckedChildren="已禁用" @change="(checked) => setState(checked,record)"/>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="$refs.modal.handleShow(record)">编辑</a>
            <a-divider type="vertical"/>
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="$auth('table.delete')">
                <a href="javascript:;" @click="$refs.table.remove(record.couponId)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </f-table>
      <coupon-drawer ref="modal"></coupon-drawer>
    </a-card>
  </div>
</template>

<script>

  import CouponDrawer from './coupon_drawer'

  export default {
    name: 'TableList',
    components: {
      CouponDrawer
    },
    data() {
      let me = this
      return {
        //列表初始化查询参数
        queryParam: {},
        scroll: { x: 1300 },
        rangeConfig:{
          beginName: 'expiryBeginTime',
          endName: 'expiryEndTime'
        },
        // 表头
        columns: [
          {
            title: '标题',
            width:240,
            dataIndex: 'couponTitle'
          },
          {
            title: '面额',
            dataIndex: 'couponAmount',
            width:80,
            align: 'center'
          },
          {
            title: '优惠形式',
            dataIndex: 'couponType',
            width:130,
            align: 'center',
            scopedSlots: { customRender: 'couponType' }
          },
          {
            title: '使用门槛',
            align: 'center',
            width:150,
            scopedSlots: { customRender: 'withAmount' }
          },
          {
            title: '限领张数',
            dataIndex: 'receiveNum',
            align: 'center'
          },
          {
            title: '发放数',
            dataIndex: 'provideNum',
            align: 'center'
          },
          {
            title: '剩余数',
            dataIndex: 'surplusNum',
            align: 'center'
          },
          {
            title: '有效期',
            dataIndex: 'expiryTime',
            align: 'center',
            width:200,
            scopedSlots: { customRender: 'expiryTime' }
          },
          {
            title: '启用状态',
            align: 'center',
            dataIndex: 'state',
            fixed:'right',
            scopedSlots: { customRender: 'state' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:'center',
            fixed:'right',
            scopedSlots: { customRender: 'action' }
          }
        ],
        //操作按钮
        operator: [
          {
            name: '添加',
            icon: 'plus',
            that: this,
            handler: function(table, that) {
              that.$refs.modal.handleShow()
            }
          },
          {
            name: '删除',
            icon: 'delete',
            batch: true,
            handler: function(table) {
              table.remove()
            }
          }
        ]
      }
    },
    created() {

    },
    methods: {

      setState(check, record) {
        this.http.post(this, {
          url: this.api.coupon.update,
          data: {
            id: record.couponId,
            state: Number(check)
          },
          success(me, data) {
            console.log(data)
            record.state = data.state
          }
        })
      }
    }

  }
</script>
